<template>

  <view class="login-container">
    <!-- 提示登录的图标 -->
    <!-- <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons> -->
    <!-- 登录按钮 -->
    <!-- 可以从 @getuserinfo 事件处理函数的形参中，获取到用户的基本信息 -->
    <!-- <button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button> -->

    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
      <image v-if="avatarUrl" :src="avatarUrl" class="avatar"></image>
      <uni-icons v-else type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    </button>

    <!-- 新版昵称获取方式 -->
    <form @submit="formSubmit">
      <input name="nickname" :value="nickName" placeholder="请输入昵称" type="nickname" class="nickname-input" />
      <button form-type="submit" type="primary" class="btn-login">一键登录</button>
    </form>
    <!-- 登录提示 -->
    <view class="tips-text">登录后尽享更多权益</view>
  </view>
</template>
<script>
  // 1. 按需导入 mapMutations 辅助函数
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        avatarUrl: '',
        nickName: ''
      }
    },
    computed: {
      // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
      ...mapState('m_user', ['redirectInfo'])
    },

    methods: {
      // 2. 调用 mapMutations 辅助方法，把 m_user 模块中的 updateUserInfo 映射到当前组件中使用
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),

      // 获取头像
      onChooseAvatar(e) {
        if (e.detail.errMsg && e.detail.errMsg.indexOf('fail') !== -1) {
          uni.$showMsg('获取头像失败，请重试');
          return;
        }
        this.avatarUrl = e.detail.avatarUrl
        console.log(e)
      },
      // 获取微信用户的基本信息
      // 修改后的 formSubmit 方法
      async formSubmit(e) {
        // if (e.detail.errMsg.includes('fail')) {
        //   return uni.$showMsg('您取消了登录授权')
        // }
        // console.log(e)
        const nickName = e.detail.value.nickname
        if (!nickName) return uni.$showMsg('请输入昵称')
        if (!this.avatarUrl) return uni.$showMsg('请选择头像')

        this.nickName = nickName

        const userInfo = {
          nickName: nickName,
          avatarUrl: this.avatarUrl
        }

        // 存储用户基本信息
        this.updateUserInfo(userInfo)

        try {
          // 调用微信登录接口获取code
          const loginRes = await uni.login()
          if (loginRes.errMsg !== 'login:ok') {
            return uni.$showMsg('微信登录失败')
          }

          // 准备参数对象
          // const params = {
          //   code: loginRes.code,
          //   iv: e.detail.iv,
          //   encryptedData: e.detail.encryptedData,
          //   rawData: e.detail.rawData,
          //   signature: e.detail.signature
          // }

          const params = {
            code: loginRes.code,
            nickName: nickName,
            avatarUrl: this.avatarUrl
          }

          // 请求后端获取token
          const {
            data
          } = await uni.$http.post('/api/public/v1/users/wxlogin', params)

          // this.updateToken("1")
          // this.navigateBack()
          if (data.meta.status !== 200) {
            return uni.$showMsg('token获取失败')
          }

          // 更新token到vuex
          this.updateToken(data.token)
          uni.$showMsg('登录成功', 'success')
          // 判断 vuex 中的 redirectInfo 是否为 null
          // 如果不为 null，则登录成功之后，需要重新导航到对应的页面
          this.navigateBack()
        } catch (error) {
          console.error('登录异常:', error)
          uni.$showMsg('登录过程发生错误')
        }
      },
      // 返回登录之前的页面
      navigateBack() {
        // redirectInfo 不为 null，并且导航方式为 switchTab
        if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
          // 调用小程序提供的 uni.switchTab() API 进行页面的导航
          uni.switchTab({
            url: this.redirectInfo.form,
            // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
            complete: () => {
              this.updateRedirectInfo(null)
            }


          })
        }

      }
    }
  }
</script>
<style scoped lang="scss">
  .avatar-wrapper {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;

    &::after {
      border: none;
    }

    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }

  .nickname-input {
    width: 80%;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
  }

  .login-container {
    // 登录盒子的样式
    height: 750rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
    position: relative;
    overflow: hidden;

    // 绘制登录盒子底部的半椭圆造型
    &::after {
      //伪类选择器
      content: ' ';
      display: block;
      position: absolute;
      width: 100%;
      height: 40px;
      left: 0;
      bottom: 0;
      background-color: white;
      border-radius: 100%; //椭圆
      transform: translateY(50%); //竖直上偏移
    }

    // 登录按钮的样式
    .btn-login {
      width: 90%;
      border-radius: 100px;
      margin: 15px 0;
      background-color: #c00000;
    }

    // 按钮下方提示消息的样式
    .tips-text {
      font-size: 12px;
      color: gray;
    }
  }
</style>